<template id="drawer-createViolation">
    <v-navigation-drawer class="elevation-24" v-if="isCreateDrawerShown" v-model="isCreateDrawerShown" :permanent="isCreateDrawerShown" fixed temporary right width="80%">
        <v-form ref="createForm" lazy-validation>
            <!-- 抽屉标题 -->
            <v-row>
                <span class="text-subtitle-1 font-weight-medium pa-6 pl-7">新增信息</span>
            </v-row>
            <!-- 抽屉表单 -->
            <!-- <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.xxxId" :rules="validationRules.requireRules"></v-text-field> -->
            <v-row class="mt-0 px-4">

                <car-number-select @success="doInsertInCreateItem" :validationRules="validationRules.requireRules"></car-number-select>
                
                <!-- <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label">客户编号（用车单位）</span>
                    <v-text-field class="jh-v-input" dense single-line filled
                        v-model="createItem.customerId"></v-text-field>
                </v-col> -->
                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label"><span class="red--text">*</span>违章时间</span>
                    <v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
                        <template v-slot:activator="{on, attrs}">
                            <v-text-field class="jh-v-input" v-bind="attrs" v-on="on" v-model="createItem.violationTime" dense single-line filled readonly label="点击此处选择日期" :rules="validationRules.requireRules"></v-text-field>
                        </template>
                        <v-date-picker color="success" elevation="20" v-model="createItem.violationTime"></v-date-picker>
                    </v-menu>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label"><span class="red--text">*</span>违章地点</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.violationLocation" :rules="validationRules.requireRules"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label"><span class="red--text">*</span>违章项目</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.violationDescription" :rules="validationRules.requireRules"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label"><span class="red--text">*</span>扣分</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.deductPoint" :rules="validationRules.requireRules"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label"><span class="red--text">*</span>罚款(元)</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.violationFine" :rules="validationRules.requireRules"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label">项目负责人</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.projectLeader"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label"><span class="red--text">*</span>违章人（司机/单位）</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.violator" :rules="validationRules.requireRules"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label">用车单位</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.carUsingUnit"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <span class="jh-input-label"><span class="red--text">*</span>违章人联系电话</span>
                    <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.violatorPhone" :rules="validationRules.requireRules"></v-text-field>
                </v-col>

            </v-row>

            <!-- 抽屉操作按钮 -->
            <v-row class="justify-end mx-0 mt-8 px-6">
                <v-btn color="success" @click="doUiAction('createItem')" small>保存</v-btn>
                <v-btn class="elevation-0 ml-2" @click="isCreateDrawerShown = false" small>取消</v-btn>
            </v-row>
        </v-form>
        <!-- 抽屉关闭按钮 -->
        <v-btn class="drawer-close-float-btn" elevation="0" color="success" fab absolute top left small tile @click="isCreateDrawerShown = false">
            <v-icon>mdi-close</v-icon>
        </v-btn>
    </v-navigation-drawer>
</template>
<script type="module">
    Vue.component("drawer-createViolation", {
        template: '#drawer-createViolation',
        props: {
            operationType: {
                type: String,
                default: ""
            },
        },
        data: () => ({
            isCreateDrawerShown: false,
            createItem: {},
            createActionData: {},
            carBasic: [],
            updateItemId: 0,
            validationRules: {
				requireRules: [v => !!v || "必填"],
			},
        }),
        mounted() {
            this.doUiAction('getCarBasic')
        },
        methods: {
            async doUiAction(uiActionId, uiActionData) {
                switch (uiActionId) {
                    case 'open':
                        await this.open(uiActionData);
                        break;
                    case 'createItem':
                        await this.prepareCreateValidate();
                        await this.confirmCreateItemDialog();
                        await this.prepareDoCreateItem();
                        await this.doCreateItem();
                        await this.closeCreateDrawer();
                        await this.getTableData();
                        break;
                }
            },
            doInsertInCreateItem(carItem){
                this.createItem.carId = carItem.carId;
                this.createItem.carNumber = carItem.carNumber
            },
            //子组件调用父组件的该方法 
            async getTableData() {
                this.$emit('success')
            },
            async prepareCreateValidate() {
                if (await this.$refs.createForm.validate()) {
                    return true;
                }
                throw new Error("请完善表单信息")
            },

            async confirmCreateItemDialog() {
                if (await window.confirmDialog({ title: "操作", content: "确定操作吗？" }) === false) {
                    throw new Error("[confirmCreateFormDialog] 否");
                }
            },

            prepareDoCreateItem() {
                const { id, ...data } = this.createItem;
                this.createActionData = data;
                this.updateItemId = id;
            },

            async doCreateItem() {
                await window.jhMask.show();
                await window.vtoast.loading("操作数据");
                if (this.operationType === "create") {
                    await window.jianghuAxios({
                        data: {
                            appData: {
                                pageId: 'violationManagement',
                                actionId: 'insertItem',
                                actionData: this.createActionData,
                                idGenerate: {
                                    type: "idSequence",
                                    prefix: "WZ",
                                    bizId: "violationId",
                                    tableName: "violation",
                                },
                            }
                        }
                    })
                } else {
                    await window.jianghuAxios({
                        data: {
                            appData: {
                                pageId: 'violationManagement',
                                actionId: 'updateItem',
                                actionData: this.createActionData,
                                where: { id: this.updateItemId }
                            }
                        }
                    })
                }
                await window.jhMask.hide();
                await window.vtoast.success("操作数据成功");
            },
            async closeCreateDrawer() {
                this.isCreateDrawerShown = false;
                this.createItem = {};
                this.createActionData = null;
            },
            async open(uiActionData) {
                // 如果有数据的话，就是更新操作
                if (uiActionData) {
                    this.createItem = _.cloneDeep(uiActionData)
                }
                console.log(this.operationType)
                this.isCreateDrawerShown = true
            }
        }
    })
</script>